<template>
	<view class="content" v-if="info">
		<view class="title">{{$t('index.shoufazhenrong')}}</view>
		<view class="c-item" v-for="(item,index) in info.homeLineup" :key="item.playerId">
			<view class="i-left">
				<view class="ii">
					<view class="number">{{item.number}}</view>
					<image class="image" v-if="item.playerLogo" :src="computImageUrl(item.playerLogo)"></image>
					<image class="image" v-else src="../../../static/image/index/touxiang.png"></image>
					<view class="name">
						{{item.playerName}}
						<view class="name">{{item.position}}</view>
					</view>
				</view>
				
			</view>
			<view class="i-right">
				<view class="ii" v-if="info.awayLineup[index]">
					<view class="name">
					{{info.awayLineup[index].playerName}}
					<view class="name">{{info.awayLineup[index].position}}</view>
					</view>
					<image class="image" v-if="info.awayLineup[index].playerLogo" :src="computImageUrl(info.awayLineup[index].playerLogo)"></image>
					<image class="image" v-else src="../../../static/image/index/touxiang.png"></image>
					<view class="number">{{info.awayLineup[index].number}}</view>
				</view>
			</view>
		</view>
		<view class="title">{{$t('index.tbzhenrong')}}</view>
		<view class="c-item" v-for="(item,index) in info.homeBackup" :key="item.playerId">
			<view class="i-left">
				<view class="ii">
					<view class="number">{{item.number}}</view>
					<image class="image" v-if="item.playerLogo" :src="computImageUrl(item.playerLogo)"></image>
					<image class="image" v-else src="../../../static/image/index/touxiang.png"></image>
					<view class="name">
						{{item.playerName}}
						<view class="name">{{item.position}}</view>
					</view>
				</view>
				
			</view>
			<view class="i-right">
				<view class="ii" v-if="info.awayBackup[index]">
					<view class="name">
						{{info.awayBackup[index].playerName}}
						<view class="name">{{info.awayBackup[index].position}}</view>
					</view>
					<image class="image" v-if="info.awayBackup[index].playerLogo" :src="computImageUrl(info.awayBackup[index].playerLogo)"></image>
					<image class="image" v-else src="../../../static/image/index/touxiang.png"></image>
					<view class="number">{{info.awayBackup[index].number}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		props: {
			matchId: {
				type: [String, Number],
				default: ''
			},
		},
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
			computImageUrl(){
				return (url)=>{
					let domain = url.split("/")
					domain = domain[0]+'//'+ domain[2]
					let finalUrl = url.replace(domain, "");
					let imageurl= getApp().globalData.AppConfig.cdnDomain + finalUrl
					return imageurl
				}
			}
		},
		components: {},
		data() {
			return {
				info:'',
			}
		},
		mounted() {
			this.matchDetail()
		},
		methods: {
			matchDetail() {
				uni.$u.http.get(this.api.api_v1_fbdata_matchLineup, {
					params: {
						matchId: this.matchId
					}
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #001E28;font-size: 12px;
		.title{
			color: red;padding:5px 10px;background-color: #00141E;
		}
		.c-item{
			display: flex;width: 100%;border-top: 1px solid #003648;padding:0 10px;box-sizing: border-box;
			background-color: #00212c;color: #888;
			.i-left,.i-right{
				flex: 1;display: flex;align-items: center;padding: 10px 0;
				.ii{
					flex: 1;display: flex;align-items: center;
					.number{
						color: #fff;width: 15px;text-align: center;
					}
					.image{
						width: 22px;height: 22px;border-radius: 50%;margin:0 6px;
					}
					.name{
						width: 200rpx;color: #888;
					}
				}
				
			}
			.i-left{
				border-right: 1px solid #003648;
			}
			.i-right{
				.ii{
					justify-content: end;
				}
				.name{
					width: 200rpx;color: #888;text-align: right;
				}
			}
		}
	}
</style>